import type { ProColumns } from '@/components/Pro';
import { ProTable } from '@/components/Pro';
import { monitorServerControllerAlertInfoPage } from '@/services/ess/alertConfig';
import { DATABASE_TYPE_ENUM, fetchDictInfo } from '@/utils';
import { parse } from 'querystring';
import React, { useEffect, useState } from 'react';
import { useIntl, useLocation } from 'umi';

interface AlarmHistoryProps {
  id: string;
}

const AlarmHistory: React.FC<AlarmHistoryProps> = () => {
  const intl = useIntl();
  const location = useLocation();
  const { stationid } = parse(location.search.slice(1)) as { stationid: string };
  const [alarmTypeMap, setAlarmTypeMap] = useState<Record<string, string>>({});

  useEffect(() => {
    const fetchAlarmType = async () => {
      const alermDict = await fetchDictInfo(DATABASE_TYPE_ENUM.ALARM_TYPE);
      const map = alermDict.reduce((acc, item) => {
        acc[item.value] = item.label;
        return acc;
      }, {} as Record<string, string>);
      setAlarmTypeMap(map);
    };
    fetchAlarmType();
  }, []);

  const columns: ProColumns[] = [
    {
      title: intl.formatMessage({ id: 'maintenance.stieNo' }),
      dataIndex: 'index',
      key: 'index',
      valueType: 'index',
    },
    {
      title: intl.formatMessage({ id: 'alarmHistory.alarmServer' }),
      dataIndex: 'hostName',
      key: 'hostName',
      search: {
        transform: (value) => ({ hostName: value }),
      },
    },
    {
      title: intl.formatMessage({ id: 'alarmHistory.alarmType' }),
      dataIndex: 'alertType',
      key: 'alertType',
      render: (value) => alarmTypeMap[value as string] || value,
      valueEnum: alarmTypeMap,
      search: {
        transform: (value) => ({ alertType: value }),
      },
    },
    {
      title: intl.formatMessage({ id: 'alarmHistory.alarmReason' }),
      dataIndex: 'reason',
      key: 'reason',
      hideInSearch: true,
    },
    {
      title: intl.formatMessage({ id: 'alarmHistory.alarmTime' }),
      dataIndex: 'alertTime',
      key: 'alertTime',
      valueType: 'dateTimeRange',
      render: (_, record) => record.alertTime,
      search: {
        transform: (value) => {
          return {
            alertTimeStart: value[0],
            alertTimeEnd: value[1],
          };
        },
      },
    },
    // {
    //   title: intl.formatMessage({ id: 'alarmHistory.notificationStatus' }),
    //   dataIndex: 'notificationStatus',
    //   key: 'notificationStatus',
    // },
  ];

  const fetchAlarmHistoryData = async (params: any) => {
    const {
      current = 1,
      pageSize = 10,
      hostName,
      alertType,
      alertTimeStart,
      alertTimeEnd,
      ...restParams
    } = params;
    const response = await monitorServerControllerAlertInfoPage({
      current,
      pageSize,
      stationId: stationid || undefined,
      hostName,
      alertType,
      alertTimeStart,
      alertTimeEnd,
      ...restParams,
    });

    if (response.success && response.data) {
      return {
        data: response.data.records,
        success: true,
        total: response.data.total,
      };
    } else {
      return {
        data: [],
        success: false,
        total: 0,
      };
    }
  };

  return (
    <ProTable
      rowKey="id"
      columns={columns}
      request={fetchAlarmHistoryData}
      pagination={{
        showSizeChanger: true,
      }}
      style={{ paddingLeft: 30, paddingRight: 30 }}
    />
  );
};

export default AlarmHistory;
